<template>
  <div>
    <!-- 侦听器: watch: {} -->
    <h3>侦听器基本写法的应用:</h3>
    <br />
    用户名: <input type="text" v-model="username" /><br />
    <h3>侦听器完整写法应用:</h3>
    <br />
    姓名: <input type="text" v-model="user.name" /> 年龄:
    <input type="text" v-model="user.age" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      user: {
        name: "刘德华",
        age: 18,
      },
    };
  },
  methods: {},
  // 侦听器:
  // 语法: 要侦听的数据(新值, 就值) {}
  // 只要数据变化吗函数就会自动执行
  watch: {
    // 侦听器基本写法
    username(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    // 侦听器完整写法:  可以侦听复杂数据类型数组对象
    // deep 与 函数 handler(newVal, oldVal)为固定写法, 固定的函数名
    user: {
      // 这里要用对象包裹: 必须与被侦听的对象名保持一致
      immediate: true, // 立即执行
      deep: true, // 开启深度侦听: 深度侦听复杂类型内变化 - 固定写法
      // handler(newVal, oldVal)函数 - 固定写法; oldVal基本不用所以可以省略
      // 注意事项: 在vue2中, newVal新值与oldVal旧值是一样的, 这是一个官方bug
      // 因为因为他们引用的是同一个对象, 所以指向的是同一地址
      handler(newVal) {
        console.log(newVal.name);
        console.log(newVal.age);
        // 如果handler不接受参数, 可以通过 this.被侦听对象 来访问到被侦听的对象的新值
        console.log(this.user);
        console.log(this.user.name);
        console.log(this.user.age);
      },
    },
  },
};
</script>

<style>
</style>